<template>
  <div class="song-list">
    <ul>
      <li class="item" v-for="(song,index) in songs" :key="song.id" @click="selectItem(song,index)">
        <div class="rank" v-show="rank">
          <span :class="gerRankClass(index)">{{getRankTxt(index)}}</span>
        </div>
        <div class="content">
          <h2 class="name">{{song.name}}</h2>
          <p class="dest">{{getDesc(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'SongList',
    props: {
      songs: {
        type: Array,
        default: []
      },
      rank: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      getDesc(song) {
        return `${song.singer}/${song.ablum}`
      },
      selectItem(item, index) {
        this.$emit('select', item, index)
      },
      gerRankClass(index) {
        if (index <= 2) {
          return `icon icon${index}`
        } else {
          return 'text'
        }
      },
      getRankTxt(index) {
        if (index > 2) {
          return index + 1
        }
      }
    }
  }

</script>
